.nom-tree-select {
  &.p-label-align-right > .nom-field-label + .nom-field-content {
    width: 0;
  }

  > .nom-field-content {
    .nom-control {
      position: relative;
      height: 100%;
      min-height: @input-height-base-treeSelect;
      padding: @padding-y-base 24px @padding-y-base 12px;
      color: var(--nom-input-color);
      line-height: @line-height-computed;
      background: var(--nom-input-bg);
      border: 1px solid var(--nom-border-color);
      border-radius: var(--nom-border-radius);
      cursor: pointer;

      &:hover {
        border-color: var(--nom-color-primary);
      }

      &:focus-within {
        border-color: var(--nom-color-primary);
      }

      .nom-tree-select-placeholder {
        margin-top: 1.44px;
        overflow: hidden;
        color: var(--nom-input-placeholder-color);
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .nom-tree-select-clear {
        position: absolute;
        top: 0;
        right: 8px;
        bottom: 0;
        background: var(--nom-input-bg);
        cursor: pointer;
      }
    }
    .nom-tree-select-tag-hidden {
      display: none;
    }
  }

  &.s-disabled,
  &.s-disabled:hover,
  &[readonly],
  &[readonly]:hover {
    .nom-control {
      background: var(--nom-input-bg-disabled);
      border-color: var(--nom-color-border);
    }
    .nom-tree-select-clear {
      visibility: hidden;
    }
  }

  .nom-tree-select-single {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nom-tree-select-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
    padding: 0 8px;
    line-height: 1;
  }
}

.nom-tree-select-item {
  display: block;
}

.nom-tree-select-popup {
  padding: 5px 5px;

  > .nom-layout {
    max-height: 300px;
  }

  .nom-tree {
    .nom-tree-node:not(.s-disabled).filter-node
      > .nom-tree-node-content
      .nom-tree-node-content-text {
      color: inherit;
      .nom-preset-bold;
    }
  }
}

.nom-tree-select-overtag-trigger {
  border: none !important;
  background: transparent;
  cursor: default;
}

.nom-tree-select-extra-tags {
  max-width: 50vw;
  padding: 0.5rem;
  .nom-list-item {
    display: flex;
    align-items: center;
    padding: var(--nom-select-selected-item-padding);
    background: var(--nom-select-selected-item-bg);
    border: 1px solid var(--nom-select-selected-item-border-color);
    border-radius: var(--nom-border-radius);
    cursor: default;

    .nom-select-item-content {
      max-width: 20rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 4px;
    }

    .nom-icon {
      font-size: 8px;
    }
  }
}

.nom-tree-select-content {
  .nom-tag {
    margin-right: 0.5rem;
  }
}

.nom-tree-select-animate-top-show {
  -webkit-animation: nom-tree-select-keyframe-top-show 0.16s linear forwards;
  animation: nom-tree-select-keyframe-top-show 0.16s linear forwards;
}

.nom-tree-select-animate-bottom-show {
  -webkit-animation: nom-tree-select-keyframe-bottom-show 0.16s linear forwards;
  animation: nom-tree-select-keyframe-bottom-show 0.16s linear forwards;
}

.nom-tree-select-animate-top-hide {
  -webkit-animation: nom-tree-select-keyframe-top-hide 0.16s linear forwards;
  animation: nom-tree-select-keyframe-top-hide 0.16s linear forwards;
}

.nom-tree-select-animate-bottom-hide {
  -webkit-animation: nom-tree-select-keyframe-bottom-hide 0.16s linear forwards;
  animation: nom-tree-select-keyframe-bottom-hide 0.16s linear forwards;
}

@-webkit-keyframes nom-tree-select-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes nom-tree-select-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-tree-select-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes nom-tree-select-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-tree-select-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@keyframes nom-tree-select-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@-webkit-keyframes nom-tree-select-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}

@keyframes nom-tree-select-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}
